<template>
  <div class="invite-page">
    <el-card shadow="never" class="invite-generate-bar">
      <el-form :inline="true" :model="form" label-width="80px">
        <el-form-item label="生成数量">
          <el-input-number v-model="form.number" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="过期时间">
          <el-date-picker v-model="form.expiresAt" type="datetime" placeholder="选择过期时间" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleGenerate">生成邀请码</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchUnusedCodes">查询未使用邀请码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="invite-table-card">
      <el-table :data="inviteList" border stripe style="width: 100%">
        <el-table-column prop="code" label="邀请码" min-width="200">
          <template #default="scope">
            <span>{{ scope.row.code }}</span>
            <el-button type="text" size="small" @click="copyCode(scope.row.code)">复制</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="expiresAt" label="过期时间" min-width="160">
          <template #default="scope">
            <span>{{ formatDate(scope.row.expiresAt) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isActive" label="状态" min-width="80">
          <template #default="scope">
            <el-tag :type="scope.row.isActive === 0 ? 'success' : 'info'">
              {{ scope.row.isActive === 0 ? '未使用' : '已使用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160">
          <template #default="scope">
            <span>{{ formatDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:16px;text-align:right;">
        <el-button @click="fetchCodes">刷新</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getInvitationCodes, generateInvitationCodes } from '../api/user';
import { ElMessage } from 'element-plus';

const form = reactive({
  number: 1,
  expiresAt: ''
});
const inviteList = ref([]);

const fetchCodes = async () => {
  try {
    const res = await getInvitationCodes();
    inviteList.value = Array.isArray(res) ? res : [];
  } catch (e) {
    ElMessage.error('获取邀请码失败');
  }
};

const handleGenerate = async () => {
  if (!form.number || form.number < 1 || form.number > 100) {
    ElMessage.warning('生成数量需在1-100之间');
    return;
  }
  try {
    await generateInvitationCodes({
      number: form.number,
      expiresAt: form.expiresAt
    });
    ElMessage.success('生成成功');
    fetchCodes();
  } catch (e: any) {
    ElMessage.error(e?.msg || e?.message || '生成失败');
  }
};

const copyCode = (code: string) => {
  navigator.clipboard.writeText(code).then(() => {
    ElMessage.success('已复制');
  });
};

const fetchUnusedCodes = async () => {
  try {
    const res = await getInvitationCodes();
    // 只显示未使用的邀请码（isActive === 0）
    inviteList.value = (Array.isArray(res) ? res : []).filter(item => item.isActive === 0);
  } catch (e) {
    ElMessage.error('获取未使用邀请码失败');
  }
};

function formatDate(val: string) {
  if (!val) return '';
  return val.replace('T', ' ').slice(0, 19);
}

onMounted(() => {
  fetchCodes();
});
</script>

<style scoped>
.invite-page {
  padding: 0;
}
.invite-generate-bar {
  margin-bottom: 18px;
  border-radius: 8px;
}
.invite-table-card {
  border-radius: 8px;
}
</style> 